import React from 'react';
import '../../static/topic/topicDetails.styl'
import {Form, Input, Row, Col, Checkbox, Button, DatePicker, Radio, message, TimePicker} from 'antd';
import {withRouter} from 'react-router-dom'
import moment from 'moment';
import axios from 'axios'

const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const format = 'HH:mm:ss';

@withRouter
class RegistrationForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.index,
      defaultList: [],
    };
  }
  // 页面跳转
  goRouter(d) {
    this.props.history.push(d)
  }
  // 规范时间格式
  format = (str) => {
    return moment(str, 'YYYY-MM-DD HH:mm:ss');
  };
  // 点击保存按钮触发事件
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        let startTime = '', endTime = '';
        if (values.forever === '1') {
          startTime = moment().subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss');
          endTime = moment().format('YYYY-MM-DD HH:mm:ss');
        } else {
          startTime = this.format(values.startdate.format('YYYY-MM-DD') + ' ' + values.starttime.format('HH:mm:ss'));
          endTime = this.format(values.enddate.format('YYYY-MM-DD') + ' ' + values.endtime.format('HH:mm:ss'))
        }
        let modify = await
          axios.post('vrv-monitor-platform-web/topic/update', {
            id: this.state.defaultList.id,
            topicName: values.title,
            monitorStartTime: startTime,
            monitorEndTime: endTime,
            home: this.state.defaultList.home,
            distKeyword: values.distKeyword,
            nameKeyword: values.nameKeyword,
            eventKeyword: values.eventKeyword,
            excludeKeyword: values.excludeKeyword,
            carrier: values.carrier.toString(),
            scope: values.scope,
          });
        if (modify.data.statusCode === 200) {
          message.success('修改成功');
          localStorage.clear();
          this.props.history.push('/topic');
        } else {
          message.error(modify.data.message);
        }
      }
    });

  };
  // 获取选择专题对应的数据
  queryTopicDetails = async () => {
    let lists = await
      axios.post('vrv-monitor-platform-web/topic/read/detail', {
        id: this.state.id
      });
    // console.log(lists.data.data)
    this.setState({
      defaultList: lists.data.data,
    }, () => {
      this.props.form.setFieldsValue({
        carrier: this.state.defaultList.carrier.split(','),
        scope: this.state.defaultList.scope,
        startdate: moment(this.state.defaultList.monitorStartTime.split(' ')[0], 'YYYY-MM-DD'),
        starttime: moment(this.state.defaultList.monitorStartTime.split(' ')[1], 'HH:mm:ss'),
        enddate: moment(this.state.defaultList.monitorEndTime.split(' ')[0], 'YYYY-MM-DD'),
        endtime: moment(this.state.defaultList.monitorEndTime.split(' ')[1], 'HH:mm:ss'),
      });
    });
  };

  componentDidMount() {
    this.queryTopicDetails()
  }

  render() {
    const {getFieldDecorator} = this.props.form;

    const formItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 15, offset: 1},
    };
    const tailFormItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 15, offset: 4},
    };
    const plainOptions = [{label: '新闻', value: '0'},
      {label: '论坛', value: '1'},
      {label: '微博', value: '2'},
      {label: '博客', value: '5'},
      {label: '贴吧', value: '6'},
      {label: '其他', value: '4'},
      {label: 'Twitter', value: '9'},
      {label: '微信', value: '10'},
      {label: '平面媒体', value: '3'}];
    const range = [{label: '全国', value: '-1'},
      {label: '本地', value: '1'},
      {label: '境外', value: '3'},
      {label: '境内外全部', value: '4'}];
    const permanent = [{label: '永久', value: '1'}];
    return (
      <div className="editTopic">
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="专题名称"
          >
            {getFieldDecorator('title', {
              rules: [{required: true, message: '请输入专题名称',}],
              initialValue: this.state.defaultList.topicName
            })(
              <Input style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            label="生效时间"
            {...formItemLayout}
          >
            <Col span={5} style={{marginRight: '10px'}}>
              <FormItem label={``}>
                {getFieldDecorator('startdate', {
                  rules: [{type: 'object', required: true, message: '请选择开始日期'}],
                })(
                  <DatePicker format={dateFormat}/>
                )}
              </FormItem>
            </Col>
            <Col span={5} style={{marginRight: '10px'}}>
              <FormItem label={``}>
                {getFieldDecorator('starttime', {
                  rules: [{type: 'object', required: true, message: '请选择开始时间'}],
                })(
                  <TimePicker format={format}/>
                )}
              </FormItem>
            </Col>
            <Col span={1}>
              To
            </Col>
            <Col span={5} style={{marginRight: '10px'}}>
              <FormItem label={``}>
                {getFieldDecorator('enddate', {
                  rules: [{type: 'object', required: true, message: '请选择结束日期'}],
                })(
                  <DatePicker format={dateFormat}/>
                )}
              </FormItem>
            </Col>
            <Col span={5} style={{marginRight: '10px'}}>
              <FormItem label={``}>
                {getFieldDecorator('endtime', {
                  rules: [{type: 'object', required: true, message: '请选择结束时间'}],
                })(
                  <TimePicker format={format}/>
                )}
              </FormItem>
            </Col>
            <Col span={1}>
              <FormItem label={``}>
                {getFieldDecorator('forever')(
                  <RadioGroup options={permanent}/>
                )}
              </FormItem>
            </Col>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="地区关键词"
          >
            {getFieldDecorator('distKeyword', {
              rules: [{required: true, message: '请输入地域词'}],
              initialValue: this.state.defaultList.distKeyword
            })(
              <Input placeholder="请输入地域词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="主题关键词"
          >
            {getFieldDecorator('nameKeyword', {
              rules: [{required: true, message: '请输入主体词'}],
              initialValue: this.state.defaultList.nameKeyword
            })(
              <Input placeholder="请输入主体词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="事件关键词"
          >
            {getFieldDecorator('eventKeyword', {
              initialValue: this.state.defaultList.eventKeyword
            })(
              <Input placeholder="请输入事件词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="排除关键词"
          >
            {getFieldDecorator('excludeKeyword', {
              initialValue: this.state.defaultList.excludeKeyword
            })(
              <Input placeholder="请输入排除关键词" style={{width: '50%'}}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="监测载体"
          >
            {getFieldDecorator('carrier', {
              rules: [{required: true, message: '请选择监测载体',}],

            })(
              <CheckboxGroup options={plainOptions}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="监测范围"
          >
            {getFieldDecorator('scope', {
              rules: [{required: true, message: '请选择监测范围',}],
            })(
              <RadioGroup options={range}/>
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit" style={{marginRight: '30px'}}>保存</Button>
            <Button onClick={() => (this.goRouter('/topic'))}>取消</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const Modify = Form.create()(RegistrationForm);
export default Modify;